<template>
	<view class="h-tabs" :style="{
		width: tabsWidth + 'px',
		height: height + 'rpx',
		background: backgroundColor,
	}">
		<scroll-view class="h-tabs-scroll" :scroll-x="scroll" :scroll-left="scrollLeft"
			:scroll-with-animation="animation">
			<view class="h-tabs-wrapper" :style="{
				height: height + 'rpx',
				lineHeight: height + 'rpx'
			}">
				<view :id="'h-tabs_'+index" class="h-tabs-item" v-for="(item, index) in dataList" :key="index"
					:style="{ width: itemWidth + 'rpx' }" @tap="swichTabs(index)">
					<text :style="{
						color: currentTab == index ? selectedColor : color,
						fontSize: currentTab == index ? selsctedSize + 'rpx' : size + 'rpx',
						fontWeight: bold && currentTab == index ? 'bold' : 'normal'
					}">
						{{ item[dataKey||'name'] }}
					</text>
				</view>
				<view v-if="unlined" class="h-tabs-unlined" :style="{
						width: sliderWidth + 'rpx',
						height: sliderHeight + 'rpx',
						borderRadius: sliderRadius,
						background: sliderBgColor,
						left: left + 'rpx'
					}"></view>
			</view>
		</scroll-view>
		<slot v-if="expand" name="expand"></slot>
	</view>
</template>

<script>
	/**
	 * tabs 标签栏
	 * @description 标签栏组件,标签多时可配置滑动,标签少时可禁止滑动,该组件滑动时激活的tab会移动到中央
	 * @tutorial 暂无链接
	 * @property {Array} data 标签数组
	 * @property {String} dataKey 标签数组的key,当标签数组元素为对象时使用
	 * @property {Number} currentTab 当前tab的索引
	 * @property {Number} width 组件的宽度,单位以px计算
	 * @property {Number} height 组件的高度,单位以rpx计算
	 * @property {String} backgroundColor 组件的背景颜色
	 * @property {Boolean} unlined 是否开启滑块显示
	 * @property {Number} sliderWidth 滑块的宽度,单位以rpx计算
	 * @property {Number} sliderHeight 滑块的高度,单位以rpx计算
	 * @property {String} sliderBgColor 滑块的背景颜色
	 * @property {String} sliderRadius 滑块的圆角,单位以rpx计算
	 * @property {Number} itemWidth tab项的宽度,单位以rpx计算
	 * @property {String} color tab项的字体颜色
	 * @property {String} selectedColor 激活的tab项的字体颜色
	 * @property {Number} size tab项的字体大小,单位以rpx计算
	 * @property {Number} selsctedSize 激活的tab项的字体大小,单位以rpx计算
	 * @property {Boolean} bold 激活的tab项字体是否加粗
	 * @property {Boolean} scroll 是否允许tab组件滚动
	 * @property {Boolean} animation 是否开启滚动动画
	 * @property {Boolean} expand 是否开启tabs拓展,在尾部添加一些特殊的图片或者文字之类
	 * @event {Function} change 点击标签时触发
	 * @example <h-tabs :data="tabs_list" :currentTab="tabs_index" @change="tabs_change"></h-tabs>
	 */
	export default {
		name: "h-tabs",
		props: {
			data: {
				type: Array,
				default: () => []
			},
			dataKey: {
				type: String,
				default: ""
			},
			currentTab: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 100
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			// 滑块
			unlined: {
				type: Boolean,
				default: true
			},
			//滑块宽度
			sliderWidth: {
				type: Number,
				default: 46
			},
			//滑块高度
			sliderHeight: {
				type: Number,
				default: 6
			},
			//滑块背景颜色
			sliderBgColor: {
				type: String,
				default: '#5677fc'
			},
			sliderRadius: {
				type: String,
				default: '50rpx'
			},
			//标签页宽度
			itemWidth: {
				type: Number,
				default: 120
			},
			//字体颜色
			color: {
				type: String,
				default: '#000'
			},
			//选中后字体颜色
			selectedColor: {
				type: String,
				default: '#5677fc'
			},
			//字体大小
			size: {
				type: Number,
				default: 30
			},
			// 选中后字体大小
			selsctedSize: {
				type: Number,
				default: 32
			},
			//选中后 是否加粗 ，未选中则无效
			bold: {
				type: Boolean,
				default: false
			},
			// 是否允许滚动
			scroll: {
				type: Boolean,
				default: true
			},
			// 是否开启滚动动画
			animation: {
				type: Boolean,
				default: true
			},
			// 尾部拓展
			expand: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			// 计算tabs的宽度
			width(val) {
				this.tabsWidth = uni.upx2px(val);
			},
			// 计算滚动条左偏移量
			currentTab(val) {
				this.scrollLeft = this.dataList[val].left - this.scrollWidth / 2 + this.dataList[val].width / 2
			}
		},
		computed: {
			// 计算滑块偏移量
			left() {
				return (this.itemWidth * this.currentTab) + (this.itemWidth / 2) - (this.sliderWidth / 2);
			},
			dataList() {
				return this.data.map(item => item.constructor == Object ? item : {
					name: item
				})
			}
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					this.tabsWidth = this.width == 0 ? res.windowWidth : uni.upx2px(this.width);
				}
			})
		},
		mounted() {
			this.$nextTick(() => {
				this.getScrollWidth();
			});
		},
		data() {
			return {
				tabsWidth: 0,
				scrollWidth: 0,
				scrollLeft: 0
			}
		},
		methods: {
			// 获取滑动区域全宽
			getScrollWidth() {
				const query = uni.createSelectorQuery().in(this);
				query.select(".h-tabs-scroll").boundingClientRect(res => {
					this.scrollWidth = res.width;
				}).exec();
				query.selectAll(".h-tabs-item").boundingClientRect(res => {
					for (let i in res) {
						this.dataList[i].left = res[i].left;
						this.dataList[i].width = res[i].width;
					}
				}).exec();
			},
			swichTabs(index) {
				let item = this.dataList[index];
				if (item && item.disabled) return;
				if (this.currentTab == index) {
					return false;
				} else {
					this.$emit('change', {
						index: Number(index)
					});
				}
			},
		}
	}
</script>

<style scoped>
	.h-tabs {
		display: flex;
		align-items: center;
	}

	.h-tabs-scroll {
		overflow: hidden;
	}

	.h-tabs-wrapper {
		position: relative;
		display: flex;
	}

	.h-tabs-item {
		text-align: center;
		flex-shrink: 0;
	}

	.h-tabs-unlined {
		position: absolute;
		bottom: 0;
		transition: left .2s ease-in-out;
		z-index: 9;
	}
</style>